<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      autofocus
      placeholder="What needs to be done?"
      @keyup.enter="addTodo($event.target.value.trim())"
    />
  </header>
</template>

<script>
import { mapActions } from "vuex";

export default {
  methods: {
    ...mapActions(["addTodo"]),

    // addTodo(event) {
    //   console.log("event", event);
    //   // 1. 获取输入框的 value
    //   const value = event.target.value.trim();

    //   // 2. 非空校验
    //   if (!value) return;

    //   // 3. 派发 addTodo 动作
    //   this.$store.dispatch("addTodo", value);

    //   // 4. 清空输入框
    //   event.target.value = ''
    // },
  },
};
</script>
